import React, { useCallback } from 'react'
import { View, Text } from '@tarojs/components'
import i18n from '@I18N'
import Medicine from '@COMPONENTS/Medicine'
import Navigate from '@NAVIGATION/navigateManager'
import './DoctorAdviceItem.scss'

const DoctorAdviceItem = ({
  title, content, isMedication, medicineArray, language
}) => {
  const onClickItem = useCallback(item => {
    const { MedicineId } = item
    Navigate.medicineDetail({ mId: MedicineId })
  }, [])
  return (
    <View className="doctor-advice-item">
      <Text className={`title${isMedication ? ' margin12' : ''}`}>{title}</Text>
      {isMedication ? (
        <Medicine
          medicines={medicineArray}
          onClickItem={onClickItem}
          dotClassName="advice-dot"
          medicineClass="advice-medicine-name"
          containerStyle="container-item"
          language={language}
          lastItemStyle="last-item"
          showNoText
        />
      ) : <Text className="content">{content || i18n.common.none()}</Text>}
    </View>
  )
}

export default DoctorAdviceItem
